import stylisticTs from '@stylistic/eslint-plugin-ts';
import stylisticJs from '@stylistic/eslint-plugin-js';
import stylisticJsx from '@stylistic/eslint-plugin-jsx';
import stylisticPlus from '@stylistic/eslint-plugin-plus';
// import parserTs from '@typescript-eslint/parser';
import vueParser from 'vue-eslint-parser';
import eslintVue from 'eslint-plugin-vue';
import globals from 'globals';

export default [
	...eslintVue.configs['flat/recommended'],
	{
		plugins: {
			'@stylistic/ts': stylisticTs,
			'@stylistic/js': stylisticJs,
			'@stylistic/jsx': stylisticJsx,
			'@stylistic/plus': stylisticPlus,
		},
		files: ['**/*.js', '**/*.jsx', '**/*.ts', '**/*.tsx', '**/*.vue'],
		languageOptions: {
			parser: vueParser,
			parserOptions: {
				extraFileExtensions: ['.vue'], // 解析 .vue 文件
				ecmaFeatures: {
					jsx: true,
					tsx: true,
				},
				ecmaVersion: 2020,
				useJSXTextNode: true,
				sourceType: 'module',
			},
			globals: {
				...globals.browser,
				...globals.node,
				uni: 'readonly',
				wx: 'readonly',
			},
		},
		ignores: ['node_modules', 'dist', 'dist_weixin'],
		rules: {
			/**
			 * 在模板中的自定义组件上强制实施属性命名样式
			 * @see https://eslint.vuejs.org/rules/attribute-hyphenation.html
			 */
			'vue/attribute-hyphenation': [
				'error',
				'always',
				{
					ignore: [],
					ignoreTags: [],
				},
			],
			/**
			 * 强制属性顺序
			 * @see https://eslint.vuejs.org/rules/attributes-order.html
			 */
			'vue/attributes-order': [
				'error',
				{
					order: [
						'GLOBAL',
						'DEFINITION',
						'LIST_RENDERING',
						'CONDITIONALS',
						'RENDER_MODIFIERS',
						['UNIQUE', 'SLOT'],
						'TWO_WAY_BINDING',
						'OTHER_DIRECTIVES',
						'OTHER_ATTR',
						'CONTENT',
						'EVENTS',
					],
					alphabetical: false,
				},
			],
			/**
			 * 强制组件顶级元素的顺序
			 * @see https://eslint.vuejs.org/rules/block-order.html
			 */
			"vue/block-order": ["error", {
				"order": [["template", "script:not([setup])", "script[setup]", 'style:not([scoped])', "style[scoped]"]]
			}],
			/**
			 * 对组件定义名称强制执行特定大小写
			 * @see https://eslint.vuejs.org/rules/component-definition-name-casing.html
			 */
			"vue/component-definition-name-casing": ["error", "kebab-case"],
			/**
			 * 强制执行第一个属性的位置
			 * @see https://eslint.vuejs.org/rules/first-attribute-linebreak.html
			 */
			"vue/first-attribute-linebreak": ["error", {
				"singleline": "below",
				"multiline": "below"
			}],
			/**
			 * 要求或禁止在标签的右括号前使用换行符
			 * @see https://eslint.vuejs.org/rules/html-closing-bracket-newline.html
			 */
			"vue/html-closing-bracket-newline": [
				"error",
				{
					"singleline": "never",
					"multiline": "always",
					"selfClosingTag": {
						"singleline": "never",
						"multiline": "always"
					}
				}
			],
			/**
			 * 需要或不允许在标签的右括号前使用空格
			 * @see https://eslint.vuejs.org/rules/html-closing-bracket-spacing.html
			 */
			"vue/html-closing-bracket-spacing": ["error", {
				"startTag": "always",
				"endTag": "never",
				"selfClosingTag": "always"
			}],
			/**
			 * 强制使用结束标记样式
			 * @see https://eslint.vuejs.org/rules/html-end-tags.html
			 */
			"html-end-tags": ["error", "always"],
			/**
			 * html 中强制使用缩进
			 */
			"vue/html-indent": ["error", 2, {
				"attribute": 1,
				"baseIndent": 1,
				"closeBracket": 0,
				"alignAttributesVertically": true,
				"ignores": []
			}],
			/**
			 * 强制 html 的引号使用
			 * @see https://eslint.vuejs.org/rules/html-quotes.html
			 */
			"vue/html-quotes": ["error", "single", { "avoidEscape": true }],
			/**
			 * 对没有子元素的标签强制使用自闭合
			 * @see https://eslint.vuejs.org/rules/html-self-closing.html
			 */
			"vue/html-self-closing": ["error", {
				"html": {
					"void": "always",
					"normal": "never",
					"component": "always"
				},
				"svg": "always",
				"math": "always"
			}]
		},
	},
];
